<template>
  <view class="container mx-auto px-4 py-6">
    <!-- 加载状态 -->
    <view v-if="loading" class="flex justify-center items-center h-64">
      <text class="text-gray-500">加载中...</text>
    </view>
    
    <!-- 文章内容 -->
    <view v-else>
      <view class="mb-4">
        <text class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">{{ item.title }}</text>
      </view>
      
      <view class="flex items-center text-sm text-gray-500 mb-6">
        <text>{{ formatDate(item.createtime) }}</text>
      </view>
      
      <view class="mb-6">
        <image 
          :src="item.image" 
          class="w-full h-40 object-cover rounded-lg shadow-sm"
          mode="aspectFill"
        />
      </view>
      
      <view class="prose max-w-none" v-html="processContent(item.content)"></view>
    </view>
    
    <!-- 返回按钮 -->
    <!-- <view class="mt-6 flex justify-center">
      <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded transition duration-300" @click="goBack">
        返回
      </button>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
import http from "@/utils/http";
import { onMounted, ref, computed } from "vue";
// import { useRouter } from "vue-router";
import Taro from '@tarojs/taro';
import { getFullPath } from "@/utils/config";

// const router = useRouter();
const loading = ref(true);
const error = ref(null);

// 文章数据
const item = ref({
  title: "",
  image: "",
  content: "",
  createtime: ""
});

// 获取文章ID
// const route = useRoute();
const params = Taro.getCurrentInstance().router?.params;
const articleId = params?.id;

// 日期格式化函数
const formatDate = (dateStr: string) => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  return date.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric"
  });
};

// 处理内容中的链接
const processContent = (content: string) => {
  if (!content) return "";
  // 处理相对路径链接
  return content.replace(/<a href="(?!http)([^"]*)"/g, '<a href="javascript:void(0)" @click="handleLink(\'$1\')"');
};

// 处理内部链接点击
const handleLink = (url: string) => {
  console.log("导航到:", url);
  // 这里可以添加内部链接导航逻辑
//   router.push({ path: url });
};

// 返回上一页
const goBack = () => {
//   router.back();
};

// 获取文章详情
onMounted(() => {
  http
    .post("/index.php/index/api/index", {
      Func: "getArticleDetail",
      data: {
        id: articleId
      }
    })
    .then((res: any) => {
      if (res.error == 0) {
        item.value = res.data;
        item.value.image = getFullPath(item.value.image)
      } else {
        error.value = res.message || "获取文章失败";
      }
    })
    .catch((err) => {
      error.value = "网络错误，请稍后重试";
      console.error("获取文章详情失败:", err);
    })
    .finally(() => {
      loading.value = false;
    });
});
</script>

<style scoped>
/* 自定义内容样式 */
.prose {
  max-width: none;
}

.prose img {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0.5rem;
}

.prose a {
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.2s;
}

.prose a:hover {
  color: #2563eb;
  text-decoration: underline;
}
</style>
  